<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<template>
  <view class="container">
    <view class="header">
      <view class="custom-navigation">
        <text>优医问诊</text>
      </view>
      <view class="search">
        <image src="/static/image/search_default@1x.png" mode="" />
        <text>搜一搜：疾病/症状/医生/健康知识</text>
      </view>
      <view class="type">
        <view class="list">
          <image src="/static/image/drug_order@1x.png" mode="" />
          <view class="title">极速问诊</view>
          <view class="desc">20s医生极速回复</view>
        </view>
        <view class="list">
          <navigator url="/pages/wenDoctor/wenDoctor">
            <image src="/static/image/inquiry_graphic@1x.png" mode="" />
            <view class="title">问医生</view>
            <view class="desc">按科室查问医生</view>
          </navigator>
        </view>
        <view class="list">
          <image src="/static/image/inquiry_prescribe@1x.png" mode="" />
          <view class="title">开药门诊</view>
          <view class="desc">线上买药更方便</view>
        </view>
      </view>
      <view class="smallnav">
        <view class="smallnavs">
          <image src="/static/image/drug_order@1x.png" mode="" />
          <view>药品订单</view>
        </view>
        <view class="smallnavs">
          <image src="/static/image/health_records@1x.png" mode="" />
          <view>健康档案</view>
        </view>
        <view class="smallnavs">
          <image src="/static/image/my_prescription@1x.png" mode="" />
          <view>我的处方</view>
        </view>
        <view class="smallnavs">
          <image src="/static/image/disease_inquiry@1x.png" mode="" />
          <view>疾病查询</view>
        </view>
      </view>
      <!-- 轮播图 -->
      <view class="swiper">
        <swiper indicator-dots autoplay circular>
          <swiper-item>
            <image src="/static/swiper/coupon_banner@1x.png" alt="" />
          </swiper-item>
          <swiper-item>
            <image src="/static/swiper/coupon_banner@1x.png" alt="" />
          </swiper-item>
        </swiper>
      </view>
      <!-- tab切换 -->
      <t-tabs 
        :offset-top="navbarHeight" 
        :space-evenly="false" 
        :animation="{ duration: 0.6 }" 
        default-value="0" 
        @change="onTabsChange" 
        @click="onTabsClick" 
        t-class="custom-tabs" 
        t-class-content="custom-panel"
      >
        <t-tab-panel label="关注" value="0">
          <scroll-view class="custom-panel__content1" scroll-x enable-flex>
            <view class="overList" v-for="(item, index) in recommendList" :key="item.id">
              <image :src="item.headersrc" mode="" />
              <view class="name">{{ item.creatorName }}</view>
              <view class="workList">{{ item.creatorHospatalName }}</view>
              <t-button 
                @tap="toggleFollow(index)" 
                :data-index="index" 
                theme="primary" 
                size="large" 
                variant="outline"
              >
                {{ item.likeFlag ? '已关注' : '+关注' }}
              </t-button>
            </view>
          </scroll-view>
        </t-tab-panel>
        <t-tab-panel label="推荐" value="1">
          <view class="custom-panel__content">
            <view class="contentList" v-for="(item, index) in knowledge" :key="item.id">
              <view class="top">
                <image :src="item.creatorAvatar" mode="" />
                <view class="center">
                  <view>{{ item.creatorName }}</view>
                  <view class="work">
                    {{ item.creatorHospatalName }}
                    {{ item.creatorDep }}
                    {{ item.creatorTitles }}
                  </view>
                </view>
                <t-button 
                  @tap="toggleFollow(index)" 
                  :data-index="index" 
                  theme="primary" 
                  size="large" 
                  variant="outline"
                >
                  {{ item.likeFlag ? '已关注' : '+关注' }}
                </t-button>
              </view>
              <view class="centertitle">{{ item.title }}</view>
              <view class="desc">{{ item.content }}</view>
              <view class="image">
                <image :src="item.coverUrl[0]" mode="" />
                <image :src="item.coverUrl[1]" mode="" />
                <image :src="item.coverUrl[2]" mode="" />
              </view>
              <view class="good">
                <text>{{ item.collectionNumber }}收藏</text>
                <text>{{ item.commentNumber }}评论</text>
              </view>
            </view>
          </view>
        </t-tab-panel>
        <t-tab-panel label="减脂" value="2">
          <view class="custom-panel__content">
            <!-- 内容与推荐标签页相同，略去重复代码 -->
            <view class="contentList" v-for="(item, index) in knowledge" :key="item.id">
              <!-- 内容结构同上 -->
            </view>
          </view>
        </t-tab-panel>
        <t-tab-panel label="饮食" value="3">
          <view class="custom-panel__content">
            <!-- 内容与推荐标签页相同，略去重复代码 -->
            <view class="contentList" v-for="(item, index) in knowledge" :key="item.id">
              <!-- 内容结构同上 -->
            </view>
          </view>
        </t-tab-panel>
      </t-tabs>
      <view class="bottomList">
        <view class="contentList" v-for="(item, index) in knowledge" :key="item.id">
          <!-- 内容结构同上 -->
        </view>
      </view>
      <view style="color: #979797;text-align: center; width: 100%;">没有更多了~</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// import { onLoad, ref } from 'vue'
// import { showToast, getStorageSync, request } from '@/uni_modules/uni-ui'

// const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

// // 响应式数据
// const knowledge = ref([])
// const recommendList = ref([]) // 关注列表数据
// const navbarHeight = ref(0) // 导航栏高度

// // tabs导航切换
// function onTabsChange (event)  {
//   console.log(`Change tab, tab-panel value is ${event.detail.value}.`)
// }
// function  onTabsClick (event)  {
//   console.log(`Click tab, tab-panel value is ${event.detail.value}.`)
// }

// // 切换关注状态
// function toggleFollow (index)  {
//   // 获取当前知识列表
//   const updatedKnowledge = [...knowledge.value]
//   // 获取当前点击的医生信息
//   const doctor = updatedKnowledge[index]
//   // 切换关注状态
//   doctor.likeFlag = !doctor.likeFlag
//   // 更新数据
//   knowledge.value = updatedKnowledge
  
//   // 显示操作反馈
//   showToast({
//     title: doctor.likeFlag ? '已关注' : '已取消关注',
//     icon: 'success',
//     duration: 1500
//   })
// }

// // 推荐减脂饮食数据请求
// function getKnowledge () {
//   const token = getStorageSync('token') || '' // 从本地取 token，无则为空
//   request({
//     url: 'https://consult-api.itheima.net/patient/home/knowledge',
//     method: "GET",
//     // 请求参数
//     data: {
//       pageSize: '10',
//       type: 'recommend',
//       current: '1'
//     },
//     // 请求头信息
//     header: {
//       "Authorization": `Bearer ${token}`
//     },
//     // 请求成功
//     success: (response) => {
//       knowledge.value = response.data.data.rows
//     },
//     // 请求失败
//     fail: (error) => {
//       showToast({
//         title: '网络请求失败',
//         icon: 'loading'
//       })
//       console.log(error)
//     }
//   })
// }

// // 页面加载时获取数据
// onLoad(() => {
//   getKnowledge()
//   // 可以在这里获取导航栏高度等信息
//   // navbarHeight.value = ...
// })
</script>

<style scoped>
.header {
  height: 260rpx;
}

.custom-navigation {
  height: 220rpx;
  display: flex;
  align-items: center;
  background-color: #44caca;
  border-bottom-left-radius: 35rpx;
  border-bottom-right-radius: 35rpx;
}

.custom-navigation text {
  color: white;
  display: block;
  width: 240rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
}

.search image {
  width: 28.4rpx;
  height: 28.4rpx;
  margin-top: 28rpx;
}

.search {
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  margin: 0 auto;
  background-color: white;
  position: relative;
  top: -20rpx;
  border-radius: 50rpx;
  padding-left: 30rpx;
  box-shadow: 0px 15px 22px -7px #E0ECFAD1;
}

.search text {
  margin-left: 15rpx;
  color: #979797;
  font-size: 26rpx;
}

/* 其他样式省略，保持与原wxss一致 */
.type {
  display: flex;
  justify-content: space-evenly;
}

.type .list {
  width: 230rpx;
  height: 220rpx;
  text-align: center;
}

.type .list .title {
  font-size: 28rpx;
}

.type .list .desc {
  font-size: 22rpx;
  color: #848484;
}

.type .list image {
  width: 92rpx;
  height: 92rpx;
}

.smallnav {
  width: 100%;
  height: 80px;
  /* background-color: pink; */
  display: flex;
  justify-content: space-around;
}

.smallnavs {
  width: 80px;
  height: 100%;
  /* background-color: plum; */
  text-align: center;
  font-size: 14px;
}

.smallnavs image {
  width: 35px;
  height: 35px;
}

.swiper{
  width: 100%;
  /* height: 200px; */
  /* background-color: pink; */
}

.swiper image{
  width: 100%;
  height: 100%;
}

.custom-tabs {
  margin-bottom: 32rpx;
}

.custom-panel {
  color: var(--td-text-color-primary);
}

.custom-panel__content1{
  width: 100%;
  height: 498rpx;
  background-color: #F6F7F9;
  display: flex;
  /* margin-top: 20rpx; */
  /* overflow-y: scroll; */
}
.overList{
  padding: 0 5px;
  height: 378rpx;
  border-radius: 40rpx;
  background-color: #FFFFFF;
  text-align: center;
  margin-left: 20rpx;
  width: 268rpx;
}
.overList .name{
  font-size: 26rpx;
  font-weight: bold;
}
.overList .workList{
  font-size: 22rpx;
  color: #C3C3C5;
  width: 268rpx;
}
.custom-panel__content1 .overList image{
  width: 116rpx;
  height: 116rpx;
  margin-top: 30rpx;
}
.custom-panel__content1 .overList button{
  width: 139rpx;
  height: 56rpx;
  line-height: 56rpx;
  font-size: 24rpx;
  border-radius: 28rpx;
  background-color: #16C2A3;
  color: white;
}
.contentList{
  height: 653rpx;
}
.contentList .top{
  display: flex;
  justify-content: space-evenly;
}
.contentList .top image{
  width: 76rpx;
  height: 76rpx;
}
.contentList .top .center .work{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #C3C3C5;
  font-size: 24rpx;
  margin-top: 5rpx;
}
.contentList .top .center{
  margin-left: 20rpx;
}
.contentList .top button{
  width: 132rpx;
  height: 54rpx;
  line-height: 54rpx;
  font-size: 22rpx;
  border-radius: 27rpx;
  border: 2px solid #2CB5A5;
  background-color: white;
  margin-top: 10rpx;
  color: #2CB5A5;
}
.contentList .centertitle{
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0;
}
.contentList .desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  color: #6F6F6F;
  font-size: 28rpx;
}
.image{
  display: flex;
  justify-content: space-evenly;
  margin: 30rpx 0;
}
.image image{
  width: 212rpx;
  height: 212rpx;
  border-radius: 20rpx;
}
.good{
  color: #C3C3C5;
  font-size: 24rpx;
  margin: 20rpx 0;
}
.good text{
  display: inline-block;
  margin-left: 30rpx;
}
.bottomList{
  padding: 0 20rpx;
}
</style>
